<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 对不识别viewport设备优化 -->
    <meta name="HandheldFriendly" content="true">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <title>商品详情 | 商超世界</title>
    <link rel="icon" type="image/x-icon" href="../favicon.ico" />
    <link rel="stylesheet" href="../public/css/swiper.min.css" />
    <link rel="stylesheet" href="css/Particulars-of-goods.css">
    <link rel="stylesheet" href="../public/css/reset.css">
    <style>
        .swiper-pagination-fraction {
            text-align: right;
            padding: 0 .2rem .1rem 0;
            color: #fff;
        }

        .swiper-slide {
            display: inline-block;
        }

        .swiper-slide img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!-- 顶部 -->
    <div class="header">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="../public/images/1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../public/images/1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../public/images/1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../public/images/1.jpg" alt="">
                </div>
                <div class="swiper-slide">
                    <img src="../public/images/1.jpg" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="top">
            <a href="javascript:;">
                <img src="../public/images/back@2x.png" alt="">
            </a>
            <div class="rrr fr">
                <a href="javascript:;">
                    <img src="../public/images/fengxiang@2x.png" alt="" style="margin-right:.2rem;">
                    <img src="../public/images/shoucang@2x.png" alt="">
                </a>
            </div>
        </div>
    </div>
    <!-- 商品详情页面 -->
    <div class="bodys">
        <div class="good-top">
            <span>UNGRID17进口百花蜂蜜</span>
            <i>￥88</i>
        </div>
        <div class="mess">
            <div class="m-top">
                <li>
                    <span class="fl">品牌</span>
                    <i class="fr">LCKK</i>
                </li>
                <li>
                    <span class="fl">产地</span>
                    <i class="fr">法国</i>
                </li>
            </div>
            <div class="m-bottom">
                <span>运费:</span>
                <i>￥6</i>
                <em class="fr">已成交666件</em>
            </div>
        </div>
        <!-- 图文详情 -->
        <div class="image-text">
            <div class="scsj-top">
                <span>评价</span>
                <i>(666)</i>
                <a href="javascript:;" class="fr">查看全部评价</a>
            </div>
            <!-- 评价 -->
            <div class="scsj-assess">
                <div class="photo">
                    <img src="../public/images/qq.png" alt="" class="ff fl">
                    <span class="fl">la******ala</span>
                    <a href="javascript:;" class="mmm fl">
                        <img src="../public/images/copy@2x.png" alt="">
                        <img src="../public/images/copy@2x.png" alt="">
                        <img src="../public/images/copy@2x.png" alt="">
                        <img src="../public/images/copy@2x.png" alt="">
                        <img src="../public/images/copying@2x.png" alt="">
                    </a>
                </div>
                <div class="p-list">
                    <p>包装严实 验了是正品 朋友推荐的 穿上感觉很漂亮 很显气质的 朋友和同事看到都问我哪里买的,已经把链接发给他们了，啦啦...
                    </p>
                    <i>2017-11-11</i>
                </div>
            </div>
        </div>
        <!-- 图文详情带图片的那种 -->
        <div class="text-image">
            <h2>图文详情</h2>
            <img src="../public/images/1.jpg" alt="">
        </div>
    </div>
    <!-- 底部 -->
    <div class="foot">
        <li class="act">
            <a href="javascript:;">
                    <img src="../public/images/kefu@2x.png" alt="">
                    <p>主页</p>
                </a>
        </li>
        <li>
            <a href="javascript:;">
                    <img src="../public/images/dianpu@2x.png" alt="">
                    <p>分类</p>
                </a>
        </li>
        <li>
            <a href="javascript:;">
                    <img src="../public/images/shoppingCar@3x.png" alt="">
                    <p>购物车</p>
                </a>
        </li>
        <a href="javascript:;" class="add">
                    加入购物车
            </a>
    </div>
</body>
<script src="../public/js/jquery1.72.js"></script>
<script src="../public/js/rem.js"></script>
<script src="../public/js/swiper.jquery.min.js"></script>
<!-- <script src="../public/js/aui-tab.js"></script> -->
<script type="text/javascript">
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        //paginationType : 'progress',
        //paginationType : 'custom',
    })

</script>

</html>